<template>
	<view>
		<template v-if="loadFlag">
			<view class="loadingTxt">
				<loading></loading>
			</view>
		</template>
		<template v-else>
			<view class="infoWrap">
				<view class="infoLayer">
					<image class="samePar layerBg" src="../../../static/images/detBg.png" mode="aspectFill"></image>
				</view>
				<view class="infoCon">
					<view class="innerCon">
						<image class="userHead" src="../../../static/images/defHead.png" mode="aspectFill"></image>
						<view class="infoDet">
							<view class="userName">{{detInfo.userName}}</view>
							<view class="tjView">
								<text class="iconfont icon-nan"></text>
								<text class="tj margRl">{{detInfo.prov}}-{{detInfo.city}}</text>
								<text class="tj" v-if="detInfo.ddsLevel == -1">预注册督导师</text>
								<text class="tj" v-else-if="detInfo.ddsLevel == 1">初级督导师</text>
								<text class="tj" v-else-if="detInfo.ddsLevel == 2">中级督导师</text>
								<text class="tj" v-else>高级督导师</text>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="basicInfo">
				<view class="tit">基本信息</view>
				<view class="item">
					<view class="itemCon hasHei">
						<image class="itemImg" src="../../../static/images/zwjj.png"></image>
						<view class="smTit">个人简介</view>
					</view>
					<view class="itemCon">
						<view class="itemImg"></view>
						<view class="content noFlex">
							<view>{{detInfo.perProfile}}</view> 
							<view class="fwHour">督导时长：{{detInfo.serviceHours}}小时</view>
							<view>督导数：{{detInfo.serviceTimes}}次</view>
						</view>
					</view>
				</view>
				<view class="item">
					<view class="itemCon hasHei">
						<image class="itemImg" src="../../../static/images/scly.png"></image>
						<view class="smTit">工作年限</view>
					</view>
					<view class="itemCon">
						<view class="itemImg"></view>
						<view class="content">{{detInfo.workYears}}年</view>
					</view>
				</view>
				<view class="item">
					<view class="itemCon hasHei">
						<image class="itemImg" src="../../../static/images/scly.png"></image>
						<view class="smTit">督导风格</view>
					</view>
					<view class="itemCon">
						<view class="itemImg"></view>
						<view class="content">
							<view class="tag"
								v-for="(itemInner,indexInner) in toArrayFuns((detInfo.ddStyle || ''),',')"
								:key="indexInner" 
							>{{itemInner}}</view>
						</view>
					</view>
				</view>
				<view class="item">
					<view class="itemCon hasHei">
						<image class="itemImg" src="../../../static/images/scly.png"></image>
						<view class="smTit">流派取向</view>
					</view>
					<view class="itemCon">
						<view class="itemImg"></view>
						<view class="content">
							<view class="tag"
								v-for="(itemInner,indexInner) in toArrayFuns((detInfo.ddSects || ''),',')"
								:key="indexInner" 
							>{{itemInner}}</view>
						</view>
					</view>
				</view>
			</view>
			<view class="basicInfo smMargT" v-if="trainList.length > 0">
				<view class="tit">培训经历</view>
				<timeAxis :dataArray="trainList" currPage="ddsDet"></timeAxis>
			</view>
		</template>
	</view>
</template>

<script>
	import timeAxis from '@/components/time_axis/time_axis.vue'
	import { getDdsDetail } from '@/api/dds'
	export default {
		components:{
			timeAxis
		},
		data(){
			return{
				loadFlag:true,
				detId:'',
				detInfo:null,
				trainList:[]
			}
		},
		computed:{
			toArrayFuns(){
				return function(str,splitQuote){
					var tmpArr = str.split(splitQuote);
					return tmpArr;
				}
			}
		},
		onLoad(options){
			this.detId = options.detId;
			this.loadDdsDet();
		},
		methods:{
			loadDdsDet(){
				this.loadFlag = true;
				let field = { id:this.detId }
				getDdsDetail(field).then(res=>{
					this.loadFlag = false;
					let tmpRes = res.data.datas;
					this.detInfo = tmpRes.ddsDetail;
					this.trainList = tmpRes.trainList;
				}).catch(err=>{
					this.loadFlag = false;
					//console.log(err);
				})
			}
		}
	}
</script>

<style lang="scss">
	page{
		background: $pss-bg-primary;
	}
</style>
<style lang="scss" scoped>
	.infoWrap{
		position: relative;
		height: 300rpx;
		.infoCon,
		.infoLayer{
			height: 300rpx;
			width: 100%;
			position: absolute;
			left: 0;
			top: 0;
		}
		.infoCon{
			z-index: 2; 
			.innerCon{
				display: flex;
			}
			.infoDet{
				width: 82%;
				padding-top: 80rpx;
				.userName{
					color: $pss-text-color3;
					font-size: 36rpx;
					font-weight: bold;
					margin-bottom: 15rpx;
				}
				.tjView{
					font-size: 26rpx;
					color: $pss-text-color8;
					.iconfont{
						font-size: 24rpx;
						&.icon-nan{
							color: #1890ff;
						}
						&.icon-nv{
							font-size: 28rpx;
							color: #ef5757;
						}
					}
					.margRl{
						margin: 0 15rpx;
					}
				}
			}
			.userHead{
				width: 100rpx;
				height: 100rpx;
				border-radius: 50%;
				margin:80rpx 15rpx 0 30rpx;
			}
		}
		.infoLayer{
			z-index: 1;
			.layerBg{
				border-radius: 0 0 30rpx 30rpx;
			}
		}
	}
	.basicInfo{
		width: 650rpx;
		padding: 20rpx;
		background: #fff;
		border-radius: 16rpx;
		margin: -90rpx auto 0;
		position: relative;
		z-index: 3;
		&.smMargT{
			margin: 30rpx auto 0;
		}
		.tit{
			font-size: 36rpx;
			color: $pss-text-color3;
			font-weight: bold;
			margin-bottom: 20rpx;
		}
		.item{
			.itemCon{
				display: flex;
				&.hasHei{
					margin-top: 10rpx;
					height: 70rpx;
					line-height: 70rpx;
					align-items: center;
					font-weight: normal;
				}
			}
			.content{
				font-size: 28rpx;
				color: $pss-text-color8;
				display: flex;
				flex-wrap: wrap;
				&.noFlex{
					display: block;
				}
				.fwHour{
					margin: 10rpx 0;
				}
				.tag{
					padding: 0 10rpx;
					font-size: 28rpx;
					height: 46rpx;
					line-height: 46rpx;
					border-radius: 8rpx;
					background: #fef9f5;
					color: $pss-color-primary_1;
					margin-right: 15rpx;
					margin-bottom: 15rpx;
				}
			}
			.itemImg{
				width: 30rpx;
				height: 30rpx;
				margin-right: 10rpx;
			}
			.smTit{
				font-size: 32rpx;
				color: $pss-text-color3;
			}
		}
	}
</style>